<template>
    <section class="detail">
  			<p class="title">
  				<span class="index"  @click="goIndex"><img src="../assets/index.png"/>演示首页</span>
  				<span class="back" @click="goBack"><img src="../assets/back.png"  />返回上一页</span>
  				精准车辆保险评估
  			</p>
  			<div class="page">
  				<div class="head">
  					<p class="sousuo">搜索结果</p>
  					<img src="../assets/icon_03.png"/>
  					<p class="item1 item">车牌号码 <span style="margin-left: 32px;">{{chePai}}</span></p>
  					<p class="item2 item">所有人 <span style="margin-left: 47px;">{{allPer}}</span></p>
  					<p class="item3 item">身份证号码 <span style="margin-left: 18px;">{{sFZ}}</span></p>
  					<span class="scorl">86</span>
  					<span class="scorl_text">综合得分</span>
  					<span class="zongti_piajia">总体评价</span>
  					<p class="pingjia">
  					被评估车辆，使用年限3年车况良好，但由于属商业用途，行驶路线不规律且经常性路过事故多发路段，增加了出险风险。评分为90分
					被评估驾驶员，连续安全行车记录较好，驾龄较长。但由于有两次违章未缴罚款并且经常拖欠物业费，扣除一定的信用信用分数，评分为72分。
					基于以上两项评分，按照大数据模型的权重分配，综合评分为86分
  				</p>
  				</div>


  				<div class="content">
  					<p class="tab">
  						<span @click="acticeTab=0" :class="{'active': acticeTab===0}">综合评估</span>
  						<span @click="acticeTab=1"  :class="{'active' :acticeTab === 1}">评估历史</span>
  					</p>
  					<div class="acticeDiv" v-show="acticeTab===0">
  						<p style="margin: 0 20px;font-size: 16px;">当前车辆使用综合评分 <span class="scrol2">90</span></p>
  						<div class="left">
  							<ul class="left_ul">
  								<li>
  									<img class="leftImg" src="../assets/icon1_07.gif"/>
  									<span class="text">1.车辆日常使用人数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>

  									<span class="fen">分</span>
  									<span class="scrol3">1</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon_10.gif"/>
  									<span class="text">2.车辆主要用途</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon_12.gif"/>
  									<span class="text">3.车辆与车型指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon1_14.gif"/>
  									<span class="text">4.车辆主要行驶路段</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">1</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon1_16.gif"/>
  									<span class="text">5.车辆日常形势路线规律指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon1_19.gif"/>
  									<span class="text">6.车辆日常行驶范围的危险性指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  							</ul>
  						</div>
  						<div class="right">
  							<img src="../assets/pinggu_03.gif" style="width: 100%;"/>
  						</div>
  						<div class="jiange" style="height: 1px;background: #999999;">

  						</div>
<!--************************************************************************************************************************-->

  						<p style="margin: 0 20px;font-size: 16px;">驾驶员综合评分 <span class="scrol2">78</span></p>
  						<div class="left">
  							<ul class="left_ul">
  								<li>
  									<img class="leftImg" src="../assets/icon1_26.gif"/>
  									<span class="text">1.连续安全行驶指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">1</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon_25.gif"/>
  									<span class="text">2.三龄和性别指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon1_32.gif"/>
  									<span class="text">3.好人指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon1_35.gif"/>
  									<span class="text">4.违章指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">1</span>
  								</li>
  								<li>
  									<img class="leftImg" src="../assets/icon1_38.gif"/>
  									<span class="text">5.事故指数</span>
  									<img class="rightImg" src="../assets/icon1_22.png"/>
  									<span class="fen">分</span>
  									<span class="scrol3">5</span>
  								</li>
  							</ul>
  						</div>
  						<div class="right">
  							<img src="../assets/pinggu_03.gif" style="width: 100%;"/>
  						</div>

  					</div>
  					<div class="acticeDiv acticeDiv2" v-show="acticeTab===1">
  						<img src="../assets/table_03.gif"/>
  						<img src="../assets/table_06.png"/>
  					</div>
  				</div>
  			</div>
    </section>
</template>

<script>

    export default {
        data() {
          return {
          		chePai:'粤A12346',
          		allPer:'黄*敏',
          		sFZ:'44065544878485451',
          		acticeTab:0,

          };
        },
        methods: {
        	goIndex(){
        		window.location.href='/bigdata/bigdatafrond/index.html';
        	},
        	goBack(){
        		this.$router.go(-1);
        	}
        }
  };
</script>

<style scoped="scoped">
	.zongti_piajia{
		font-size: 15px;
		position: absolute;
		bottom: 107px;
    	left: 18px;
	}
	.pingjia{
		padding: 0 18px;
	    margin-top: 5px;
	    font-size: 14px;
	    border-top: solid 1px #d1d1d1;
	    padding-top: 34px;
	    color: #787878;
	}

	.acticeDiv2 img{
		width: 100%;
	}
	.left_ul .fen{
		float: right;
	    font-size: 15px;
	    margin-top: 8px;
	}
	.left_ul .scrol3{
		    float: right;
		    margin-top: -4px;
		    font-size: 27px;
		   color:#efaa03;
	}

	img.rightImg{
		width: 17px;
   	 vertical-align: middle;
	}
	img.leftImg {
   	 width: 35px;
   	 vertical-align: middle;
	}
	.left_ul{
		list-style: none;
		margin-top: 40px;
	}
	.left_ul .text {
    	vertical-align: middle;
    	font-size: 14px;
    	margin-left: 6px;
    }
	.left_ul li{
		position: relative;
		margin: 10px;
	}
	.left{
		width: 420px;
	    height: 320px;
	    float: left;
	    /*background: indianred;*/
	}
	.right{
		width: 310px;
	    height: 320px;
	    margin-left: 420px;
	    /*background: orange;*/
	}
	.scrol2{
	    font-size: 42px;
	    margin-left: 12px;
	    color: #efaa03;
	}

	.tab span{
		cursor: pointer;
		margin: 0px 12px;
	}
	.tab{
		 padding: 12px;
	    border-bottom: solid 1px #9999;
	    font-size: 15px;
	}
	.tab span.active{
		color: #0339DD;
	    font-weight: 600;
	    border-bottom: solid;
	    padding-bottom: 10px;
	}



	.scorl_text{
		 position: absolute;
	    right: 21px;
	    top: 80px;
	    color: #797979;
	    font-size: 16px;
	}


	.scorl{
		 font-size: 50px;
	    position: absolute;
	    right: 27px;
	    top: 24px;
	    color: #efaa03;
	}
	.head .item1{
		top: 40px;
    	left: 105px;
	}
	.head .item2{
		 top: 60px;
   		 left: 105px;
	}
	.head .item3{
			top: 80px;
    		left: 105px;
	}
	.head .item span{
		 display: inline-block;
		 color: black;
	}

	.head .item{
		    font-size: 15px;
    		color: #797979;
    		position: absolute;
	}
	.head {
		    position: relative;
		    height: 245px;
		    width:100%;
		    border-bottom: solid 4px #f0f0f0;
	}
	.page .sousuo{
		    font-size: 15px;
		padding: 10px 17px;
	}

	.head img{
		width: 60px;
		margin-left: 30px;
	}
    .detail{
    	background: #f0f0f0;
    	height: 100%;
    }
    .detail .title{
    	 height: 45px;
	    background: #0339dd;
	    line-height: 45px;
	    padding-left: 20px;
	    color: #fff;
	    letter-spacing: 1px;
	    font-size: 17px;
	    text-align: center;
    }
    .detail .title .back{
        position: absolute;
	    left: 110px;
	    font-size: 13px;
    }
    .detail .title .index{
        position: absolute;
	    left: 10px;
	    font-size: 13px;
    }
    .detail .title img{
    	width: 17px;
    	vertical-align: text-top;
    	margin-right: 5px;
    }
    .page{
      	width: 730px;
      	/*height: 720px;*/
      	background: #fff;
      	margin: 0 auto;
      }
</style>
